﻿<section>
    <div class="panel panel-default">
        <div class="panel-heading" style="position: relative;">
            <div class="abp-dock-right abp-busy-indicator abp-busy-indicator-small" data-bind="visible: refreshing()" />
            <a class="abp-clickable pull-right" data-bind="click: refresh, visible: !refreshing()">refresh</a>
            <!-- TODO: Change to icon ? -->
            <h3 class="panel-title">@L("MyTasks")</h3>
        </div>
        <ul class="list-group" data-bind="foreach: tasks">
            <a class="list-group-item" data-bind="html: title(), attr: { href: '#task/' + id() }"></a>
            <!-- TODO: Don't use inline style and hard-coded color -->
        </ul>
        <!-- ko if: tasks().length <= 0 -->
        <div class="panel-body text-muted">
            <a class="abp-clickable text-muted" href="#task/create">+ No task, create one?</a>
        </div>
        <!-- /ko -->
        <div class="panel-footer">
            <a data-bind="attr: { href: '#user/' + currentUserId + '?activeSection=UserCurrentTasks' }">@L("SeeAllTasks")</a>
        </div>
    </div>
</section>
